<!-- 信息传播 -->
<template>
    <SideBar>
        <template #left>
            <div v-if="showSideBar" class="info_lt">
                <PeopleStat></PeopleStat>
                <SmallTitle tips="信息覆盖小区各楼栋人数统计">信息传播各楼栋覆盖人数</SmallTitle>
                <div class="info_lt_echarts">
                    <HorizontalBarEcharts :seriesData="eventSeriesData" :fixed="0" :currentStep="currentStep">
                    </HorizontalBarEcharts>
                </div>
            </div>
        </template>
        <template #right>
            <div v-if="showSideBar" class="info_rt">
                <Headline>信息传播覆盖总人数百分比</Headline>
                <div class="label_count">{{ coverPerson }}</div>
                <SmallTitle tips="信息传播在时间尺度上的趋势展示">信息传播趋势</SmallTitle>
                <div class="echarts-wrapper">
                    <LineEcharts2 :xData="infectCntXData" :yData="infectCntData" tipLabel="传播趋势" :fixed="0">
                    </LineEcharts2>
                </div>
                <SmallTitle tips="不同传播方式下信息的覆盖人数统计">传播方式</SmallTitle>
                <div class="echarts-wrapper">
                    <CubeBarEcharts :seriesData="infectType1Data" :xAxisData="xAxisData1" :shapeColor="shapeColor"
                        :currentStep="currentStep" :fixed="0">
                    </CubeBarEcharts>
                </div>
                <SmallTitle tips="不同传播途径下信息的覆盖人数统计">传播途径</SmallTitle>
                <div class="echarts-wrapper">
                    <CubeBarEcharts :seriesData="infectType2Data" :xAxisData="xAxisData2" :shapeColor="shapeColor2"
                        :currentStep="currentStep" :fixed="0">
                    </CubeBarEcharts>
                </div>
            </div>
        </template>
    </SideBar>
    <div class="option_setting">
        <ConfigBtn :status="showSQ" @click="openDialog"></ConfigBtn>
        <Start v-if="hasSetSimOptions" @click="startSimulate">开始模拟</Start>
    </div>
    <UDialog v-model:visible="dialogVisible" title="模拟配置" @confirm="confirmHandle" @close="closeHandle"
        @cancel="closeHandle">
        <div class="form_item">
            <div class="label">线上传播：</div>
            <UCheckbox v-model="cognParams.adminMsg" :options="onlineOptions" single></UCheckbox>
        </div>
        <div class="form_item">
            <div class="label">线下传播：</div>
            <UCheckbox v-model="cognParams.ylbTypes" :options="ylbTypeOptions"></UCheckbox>
        </div>
        <div class="form_item form_item_date">
            <div class="label">时间：</div>
            <div class="form_item_value">
                <el-date-picker ref="datePickerRef" v-model="cognParams.time" type="datetime" placeholder="时间"
                    format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />

            </div>
        </div>
        <div class="form_item">
            <div class="label">目标人群年龄：</div>
            <div class="form_item_value">
                <USelect v-model="cognParams.age" :options="ageOptions" placeholder="年龄" bg-color="none">
                </USelect>
            </div>
        </div>
        <div class="form_item">
            <div class="label">目标人群职业：</div>
            <div class="form_item_value">
                <USelect v-model="cognParams.job" :options="jobOptions" placeholder="职业" bg-color="none">
                </USelect>
            </div>
        </div>
        <div class="form_item">
            <div class="label">任务类型：</div>
            <UCheckbox v-model="cognParams.task" :options="taskOptions" single></UCheckbox>
        </div>
        <div class="form_item">
            <div class="label">信息传播内容：</div>
            <div class="form_item_value">
                <el-input class="task_desc" v-model="cognParams.content" :rows="2" type="textarea" placeholder="" />
            </div>
        </div>
        <div class="form_item">
            <div class="label">传播手段：</div>
            <UCheckbox v-model="cognParams.strategy" :options="strategyOptions" single></UCheckbox>
        </div>
        <div class="form_item">
            <div class="label">投放频率：</div>
            <UCheckbox v-model="cognParams.frequency" :options="frequencyOptions" single></UCheckbox>
        </div>
        <input type="text" autofocus="true" class="unused_input">
    </UDialog>
</template>

<script setup>
import { onUnmounted, getCurrentInstance, onMounted, ref, watch, computed } from 'vue';
import { getCognStat, getCognEvent } from "@/api/cogn";
import LineEcharts2 from '@/components/echarts/LineEcharts2.vue';
import UCheckbox from '@/components/UCheckbox.vue';
import { useStore } from '@/stores';
import { setIntervalExc } from "@/utils/index";
const { proxy } = getCurrentInstance();
const bus = proxy.$bus;
const store = useStore();
const currentStep = ref(0);
const shapeColor = {
    left: ['rgba(19, 255, 221, 0.5)', 'rgba(19,255,221,0)'],
    right: ['#29F1FA', 'rgba(27, 126, 242, 0)'],
    top: ['#29F1FA', '#29F1FA']
}
const shapeColor2 = {
    left: ['rgba(242, 199, 27, 0.5)', 'rgba(242, 199, 27, 0)'],
    right: ['#C8C940', 'rgba(242, 199, 27, 0)'],
    top: ['#C8C940', '#C8C940']
}
const showSQ = ref(false);
const datePickerRef = ref();
const showSideBar = computed(() => store.showSidebar)
const dialogVisible = ref(false);
const hasSetSimOptions = ref(false);//是否已经设置了模拟配置

const cognParams = ref({
    time: "",
    people: "",
    age: '全部',
    job: '全部',
    task: "政策通知",
    content: "",
    strategy: "群发消息",
    frequency: "1天1次",
    neighborhood: "宜盛花园小区",
    adminMsg: 'true',
    ylbTypes: []
})
//年龄选项
const ageOptions = ref(['全部', '1到18岁', '19到35岁', '36到60岁', '60岁以上']);
//职业选项
const jobOptions = ref(['全部', '学生', '职员', '退休', '自由行业', '服务人员', '技术人员', '销售',
    '物业工作人员', '餐饮', '安保', '公益岗位', '养殖', '保洁', '生产制造', '教师', '房地产', '律师', '其他']);

const onlineOptions = ref([
    { label: '选择', value: 'true' },
    { label: '不选', value: 'false' }
])
// '小区门口', '地库门口', '楼道门口'
const ylbTypeOptions = ref([
    { label: '小区门口', value: '小区门口' },
    { label: '地库门口', value: '地库门口' },
    { label: '楼道门口', value: '楼道门口' },
]);
//任务类型
const taskOptions = ref([
    { label: '政策通知', value: '政策通知' },
    { label: '党群建设', value: '党群建设' }
]);
//传播方式
const strategyOptions = ref([
    { label: '群发消息', value: '群发消息' },
    { label: '个别通知', value: '个别通知' }
]);
const frequencyOptions = ref([
    { label: '1天1次', value: '1天1次' },
    { label: '2天1次', value: '2天1次' },
    { label: '3天1次', value: '3天1次' },
]);
const isPlaying = ref(false);
const coverPerson = ref(0);//信息传播覆盖人数
const infectCntData = ref([]);//信息传播趋势
const infectCntXData = ref([]);//信息传播趋势X轴数据
const infectType1Data = ref([]);//信息传播方式
const infectType2Data = ref([]);//信息传播方式
const xAxisData1 = ref(['管理员通知', '二次传播', '三次传播', '>3次传播']);
const xAxisData2 = ref(['家庭传播', '邻居传播', '跨楼层传播', '跨单元传播', '易拉宝传播']);

const eventSeriesData = ref([]);

//静态数据
watch(() => store.village, (newVal) => {
    cognParams.value.neighborhood = newVal;
});
onMounted(() => {
    let village = (store.village == "宜盛花园") ? (store.village + "小区") : store.village
    cognParams.value.neighborhood = village;
    bus.on('cognPlaying', (args) => {
        cognPlaying(args);
    });
    bus.on("stopPlaying", () => {
        isPlaying.value = false;
    });
})
onUnmounted(() => {
    bus.off('cognPlaying');
});
/**
 * 打开模拟配置弹窗
 */
function openDialog() {
    if (isPlaying.value) {
        proxy.$toast("模拟进行中");
        return;
    }
    dialogVisible.value = true;
    showSQ.value = true;
    bus.emit("keyboardInput", true);
}
/**
 * 开始模拟
 */
function startSimulate() {
    bus.emit('startSimulation');
    bus.emit("keyboardInput", false);
    hasSetSimOptions.value = false;
    store.setShowSidebar(true);
}
/**
 * 设置模拟参数
 */
const confirmHandle = () => {
    if (cognParams.value['adminMsg'] == 'false' && cognParams.value.ylbTypes.length == 0) {
        proxy.$toast("线上传播方式和线下传播方式必须选择一个!");
        return
    }
    if (!cognParams.value['time']) {
        proxy.$toast("请输入时间");
        return;
    }
    if (!cognParams.value['age']) {
        proxy.$toast("请输入年龄");
        return;
    }
    if (!cognParams.value['job']) {
        proxy.$toast("请输入职业");
        return;
    }
    let time = cognParams.value['time'];
    if (time) {
        time = time.replace("T", " ");
    }
    bus.emit("setCognParams", {
        adminMsg: cognParams.value['adminMsg'],
        ylbTypes: cognParams.value['ylbTypes'].join(','),
        time: time,
        age: cognParams.value['age'],
        job: cognParams.value['job'],
        people: 'people',
        task: cognParams.value['task'],
        strategy: cognParams.value['strategy'],
        frequency: cognParams.value['frequency'],
        neighborhood: cognParams.value['neighborhood'],
        place: cognParams.value['neighborhood'],
    });
    hasSetSimOptions.value = true;
    dialogVisible.value = false;
    showSQ.value = false;
    bus.emit("keyboardInput", true);
}
const closeHandle = () => {
    bus.emit("keyboardInput", true);
    showSQ.value = false;
}

/**
 * 信息传播模拟中
 */
const cognPlaying = (args) => {
    if (!showSideBar.value) {
        store.setShowSidebar(true);
        store.setShowToolbar(false);
    }
    console.log("=====step====", args['step']);
    currentStep.value = args['step'];
    getCognStatData(args);
    getCognEventData(args);
    if (args.step == args.totalSteps - 1) {
        isPlaying.value = false;
    } else {
        isPlaying.value = true;
    }
}

/**
 * 获取信息传播各楼栋覆盖人数数据
 * @param {*} args 
 */
const getCognEventData = (args) => {
    const eventParam = {
        begin: args['step'] - 1,
        end: args['step'],
        interval: 1,
        age: 0,
        edu: 0,
        job: 0
    }
    setIntervalExc(args, () => {
        getCognEvent(args['id'], eventParam).then(res => {
            if (res && res.length > 0) {
                const value = res[0]['event_cnts'];
                let eventArr = [];
                for (let index = 0; index < value.length; index++) {
                    const item = value[index];
                    eventArr.push({
                        name: item['building'] + "栋",
                        count: item['infected'],
                        // percent: item['infected']
                    },)
                }
                eventSeriesData.value = eventArr;
            }
        })
    });
}
/**
 * 获取信息传播图表数据
 * @param {*} args 
 */
const getCognStatData = (args) => {
    const param = {
        begin: args['step'],
        end: args['step'] + 1,
        interval: 1,
        factor: 1,//饼图数据要素（1为年龄，2为教育程度，3为职业）
        num_points: args['step'],
        point_interval: 1,
    }
    setIntervalExc(args, () => {
        getCognStat(args['id'], param).then(res => {
            if (res && res.length > 0) {
                const value = res[0];
                const person_stat = value['person_stat'];
                const infect_type = value['infect_type'];//传播方式|传播途径
                const targetIndex = args['step'] - 1;
                //覆盖人数百分比
                coverPerson.value = (person_stat['infected_percent'][targetIndex] * 100).toFixed(1) + '%';
                //信息传播趋势
                infectCntData.value = [{ name: '信息传播趋势', dataset: person_stat['infected_person'] }];
                let tempArr = [];
                for (let index = 0; index < person_stat['infected_person'].length; index++) {
                    tempArr.push(index + 1);
                }
                infectCntXData.value = tempArr;
                //信息传播方式
                infectType1Data.value = [infect_type['admin'][targetIndex], infect_type['second_hop'][targetIndex], infect_type['third_hop'][targetIndex], infect_type['more'][targetIndex]];
                //传播途径
                infectType2Data.value = [infect_type['same_room'][targetIndex], infect_type['same_floor'][targetIndex], infect_type['same_building'][targetIndex], infect_type['across_buildings'][targetIndex], infect_type['banner'][targetIndex]];
            }
        })
    });
}

</script>


<style scoped lang="scss">
.info_lt {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .select_echarts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
    }

    .info_lt_echarts {
        width: 100%; //799
        // height: 37%; //800
        padding: 0;
        flex: 1;
    }
}



.info_rt {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;

    .select_rt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
    }

    .label_count {
        height: 2rem;
        font-size: 0.8rem;
        color: #FFF;
        background: linear-gradient(90deg, rgba(38, 130, 255, 0) -6%, rgba(0, 148, 140, 0.3608) 49%, rgba(38, 130, 255, 0) 101%);
        box-sizing: border-box;
        border: 1px dashed #21E0C5;
        line-height: 2rem;
        text-align: center;
        margin-bottom: calc(20 / var(--fsize) * 1rem);
    }

    .echarts-wrapper {
        width: 100%;
        flex: 1;
    }
}

.info_rt_echarts {
    width: 100%;
    height: 22%;
}

.task_desc {
    font-size: 32px;

    :deep(.el-textarea__inner) {
        color: #FFF;
        border: 1.5px solid rgba(33, 224, 197, 0.5);
        box-shadow: none;
        opacity: 1;
        background: rgba(33, 224, 197, 0.12);
    }
}

:deep(.form_item .label) {
    width: 196px;
}
</style>
<style>
.form_item_date {
    div[class*='el-input'] {
        width: 100%;
        height: 70px;
        font-size: 32px;
    }

    input {
        color: rgba(207, 231, 250, 1) !important;
        font-size: 32px;
        height: 70px;
    }

    input[class*='el-input__inner']::placeholder {
        color: rgba(207, 231, 250, 1) !important;
    }
}

.el-input__wrapper {
    opacity: 1;
    background: rgba(33, 224, 197, 0.12);
    border: 1.5px solid rgba(33, 224, 197, 0.5);
    box-shadow: none;
}

.el-input__wrapper.is-focus {
    box-shadow: none;
}

.el-input__wrapper:hover {
    box-shadow: none;
}

input::placeholder {
    font-size: 32px;
    color: rgba(207, 231, 250, 1) !important;
}

input:focus-visible {
    outline: none !important;
}

.unused_input {
    width: 0;
    height: 0;
    padding-block: 0;
    padding-inline: 0;
    border-width: 0;
    float: left;
}
</style>